<template>

  <doc-alert title="WPS 开放平台" url="https://open.wps.cn/previous/docs/client/wpsLoad" />
  <doc-alert title="金山办公产品帮助中心" url="https://p.wpseco.cn/wiki/doc/632a75e2d7c60f8bf1fd82f3" />


  <ContentWrap>

    <el-space wrap alignment="flex-start">
      <el-card  class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            新建空白文档
          </div>
        </template>
        <div  class="text item">
          <el-form-item >
            <el-button type="primary" plain @click="newDoc()">
              <Icon icon="ep:plus" class="mr-5px" /> 新建文档
            </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card  class="box-card" style="width: 300px">
        <template #header>
          <div class="card-header">
            打开服务器文件
          </div>
        </template>
        <div  class="text item">
          <el-form-item label="文件ID：">
            <el-input style="width:200px;" type="text" v-model="openDocFileId"/>
          </el-form-item>
          <el-form-item label="保护模式：">
            <el-select v-model="protectType" style="width:200px;">
              <el-option
                  v-for="type in protectTypeList"
                  :key="type.value"
                  :label="type.lable"
                  :value="type.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="保护密码：">
            <el-input style="width:200px;" type="text"  v-model="protectPwd"/>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" plain @click="openDoc()">
              <Icon icon="ep:plus" class="mr-5px" /> 打开server端文件
            </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card  class="box-card" style="width: 350px">
        <template #header>
          <div class="card-header">
            在线打开
          </div>
        </template>
        <div  class="text item">
          <el-form-item label="文件ID：">
            <el-input  style="width:200px;" type="text" v-model="onlineEditDocFileId"/>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" plain @click="OnlineEditDoc()">
              <Icon icon="ep:plus" class="mr-5px" /> 在线编辑server端文件（文档不落地）
            </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card  class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            WPS状态
          </div>
        </template>
        <div  class="text item">
          <el-form-item >
            <el-button type="primary" plain @click="getDocStatus()">
              <Icon icon="ep:plus" class="mr-5px" /> 获取活动文档状态
            </el-button>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" plain @click="exitWPS()">
              <Icon icon="ep:plus" class="mr-5px" /> 关闭WPS
            </el-button>
          </el-form-item>
        </div>
      </el-card>

    </el-space>

  </ContentWrap>

</template>

<script lang="ts" setup>

import {generateUUID} from "@/utils";

defineOptions({name: 'OfficeWps'})

import {_WpsInvoke,cancelRegWebNotify} from '@/views/office/wps/js/wps.js'
import * as FileApi from '@/api/infra/file'
import {constWpsEnum} from "@/components/WpsOffice/wps/enum";

const route = useRoute() // 路由信息

const openDocFileId = ref(1480);
const onlineEditDocFileId = ref(1480);
const protectType = ref(-1);
const protectPwd = ref("996code");

const protectTypeList = [
  {
    value:-1,
    lable:"不启用保护模式"
  },
  {
    value:0,
    lable:"只允许对现有内容进行修订"
  },
  {
    value:1,
    lable:"只允许添加批注"
  },
  {
    value:2,
    lable:"只允许修改窗体域(禁止拷贝功能)"
  },
  {
    value:3,
    lable:"只读"
  },
]

// 记录当前页面打开的wps
let activeWps = {};

let routeName = route.name + generateUUID();

onUnmounted(()=>{
  console.log('onUnmounted...')
  Object.keys(activeWps).forEach(function(key) {
    cancelRegWebNotify(activeWps[key]);
  });
})

const handleWpsMessage = function (clientType, name,route,activeWpsId, data) {
  console.log(clientType, name,route,activeWpsId, data,'WPS-handleWpsMessage...clientType, clientType, name,route,activeWpsId, data')
  if(data.msgType == "wpsClose"){
    delete activeWps[data[constWpsEnum.ActiveWpsId]] ;
    cancelRegWebNotify(data[constWpsEnum.ActiveWpsId]) ;
  }
  // if(Object.keys(activeWps).length == 0){
  //   cancelRegWebNotify(route);
  // }
}

const newDoc = function (callbackFunc) {
  console.log('newDoc')
  let activeWpsId = "wps-NewDoc-"+generateUUID();
    _WpsInvoke([{
            "NewDoc": {
              [constWpsEnum.ActiveWpsId]:activeWpsId,
            }
        }],
        true,
        false,
      routeName,
      activeWpsId,
      handleWpsMessage
    ) // NewDoc方法对应于OA助手dispatcher支持的方法名
  activeWps[activeWpsId] = callbackFunc;
}

// 服务器文件地址
// https://code.996code.top:88/yudao-server/admin-api/infra/file/4/get/ba0af12f52535c646d66a1754796400db060f9f7cfa42f5e2d71ccc1ec298dc1.docx
const openDoc = async function (callbackFunc) {
  let fileInfo = await FileApi.getFileById(openDocFileId.value);
  console.log('文件信息',fileInfo);
  const  filePathUrl = fileInfo.url;
  const  fileName = fileInfo.name ;
  console.log('openDoc',filePathUrl)
  let activeWpsId = "wps-openDoc-"+generateUUID();
    let openDoc =  {
        "filePathUrl": filePathUrl,
        "fileName": fileName,
      [constWpsEnum.ActiveWpsId]:activeWpsId,
    };
    openDoc["openType"] =  { //文档打开方式
        // 文档保护类型，-1：不启用保护模式，0：只允许对现有内容进行修订，
        // 1：只允许添加批注，2：只允许修改窗体域(禁止拷贝功能)，3：只读
        "protectType": protectType.value,
          "password": protectPwd.value
    }
    _WpsInvoke([{
          "OpenDoc":openDoc
        }],
        true,
        false,
      routeName,
      activeWpsId,
      handleWpsMessage
    ) // NewDoc方法对应于OA助手dispatcher支持的方法名
  activeWps[activeWpsId] = callbackFunc;
}
const OnlineEditDoc = async function (callbackFunc) {
  let fileInfo = await FileApi.getFileById(onlineEditDocFileId.value);
  console.log('文件信息',fileInfo);
  let activeWpsId = "wps-OnlineEditDoc-"+generateUUID();
  const  filePathUrl = fileInfo.url;
  const  fileName = fileInfo.name ;
  console.log('OnlineEditDoc',filePathUrl)
    let onlineEditDoc =  {
        "filePathUrl": filePathUrl,
        "fileName": fileName,
      [constWpsEnum.ActiveWpsId]:activeWpsId,
    };

    _WpsInvoke([{
          "OnlineEditDoc": onlineEditDoc
        }],
        true,
        false,
      routeName,
      activeWpsId,
      handleWpsMessage
    ) // NewDoc方法对应于OA助手dispatcher支持的方法名
  activeWps[activeWpsId] = callbackFunc;
}
const getDocStatus = function () {
  console.log('getDocStatus')
  _WpsInvoke([{
      "GetDocStatus": {}
    }],
    false)
}

const exitWPS = function () {
  console.log('exitWPS')
  _WpsInvoke([{
    "ExitWPS": {}
  }], true)
}

</script>
